<template>
    <div>
        <div>
            <el-breadcrumb separator="/" style="margin: 8px;">
                <el-breadcrumb-item>任务统计</el-breadcrumb-item>
                <el-breadcrumb-item>任务统计看板</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <h3>任务统计看板</h3>
            <div style="margin-top: 20px;">
                <el-form :inline="true" ref="query" :model="query" label-width="70px">
                    <el-form-item label="创建时间">
                        <el-date-picker
                        v-model="query.value1"
                        class="common-width"
                        type="datetimerange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预警模型">
                        <el-select v-model="query.value" placeholder="请选择预警模型" style="width: 200px;">
                            <el-option
                              label="供应链预警模型"
                              value="1">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务状态">
                        <el-select v-model="query.value" placeholder="请选择" style="width: 200px;">
                            <el-option label="待处理" value="1"/>
                            <el-option label="处理中" value="2"/>
                            <el-option label="已完成" value="3"/>
                        </el-select>
                    </el-form-item>
                  
                    <el-form-item class="leftmargin">
                        <el-button type="primary" @click="getData">确定</el-button>
                        <el-button @click="handleClean">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="tableData" border class="table" align="center" stripe ref="table">
                <el-table-column prop="jobId" align="center"  width="100px" label="序号"></el-table-column>
                <el-table-column prop="warningModel" align="center" width="180px" label="预警模型"></el-table-column>
                <el-table-column prop="requestJob" align="center" min-width="180px" label="请求任务"></el-table-column>
                <el-table-column prop="createTime" align="center" min-width="180px" label="创建时间"></el-table-column>
                <el-table-column prop="jobState" align="center" min-width="180px" label="任务状态">
                    <template slot-scope="scope">
                        <p v-if="scope.row.jobState == 0">待处理</p>
                        <p v-else-if="scope.row.jobState == 1" style="color: green;">进行中</p>
                        <p v-else>已完成</p>
                    </template>
                </el-table-column>
                <el-table-column prop="completedTime" align="center" min-width="180px" label="完成时间"></el-table-column>
                <el-table-column label="操作" align="center" width="180px">
                    <template slot-scope="scope">
                        <el-button type="text" class="blue" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" class="blue" @click="handleEdit(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            query: {
                deviceNo: '',
                pageNum: 1,
                pageSize: 10
            },
            tableData: [],
            pageTotal: 0,

        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData(){
            ///api/jobCount/list
            this.$http.fetchGet('api/jobCount/list').then(res => {
                 console.log(res);
                 this.tableData = res;
                 this.pageTotal = 1;
             }).catch(err=>{
                this.tableData = [{
                  "jobId": 0,
                  "createTime": "2024-05-20 08:48:26",
                  "completedTime": "2024-05-20 08:48:26",
                  "warningModel": "string",
                  "requestJob": "string",
                  "jobState": "string"
                }];
                this.pageTotal = 1;
             })
        },
        handleClean(){
            this.getData();
        },
        // 编辑操作
        handleEdit(index, row) {
            console.log(row.warningModel);
            let model = row.warningModel;
            if(model == ''){
                this.$router.push({ path: '/gongjiDetail', query: { id: row.id,flag:"task" } });
            }
            
        },
        handlePageChange(){
            this.$set(this.query, 'pageNum', val);
            this.getData();
        }
    }
};
</script>

<style scoped>
.common-width {
    width: 350px;
}

.common-input {
    width: 420px;
}


.table {
    width: 100%;
    font-size: 14px;
}

.green {
    color: #67c23a;
}

.blue {
    color: #409eff;
}

.origin {
    color: #ff7300;
}

.red {
    color: #f56c6c;
}

.leftmargin {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.form>>>.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}
.table>>>.el-table th>.cell{
    font-weight: 400;
    font-size: 13px;
    color: black;
}
</style>
